<template>
  <div>
    <el-dialog v-model="isShow" :fullscreen="true" @close="close" v-if="isShow">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h1 :id="titleId" :class="titleClass">{{ props.title }}</h1>
          <div class="btns">
            <el-button
              type="primary"
              v-if="props.isDownload"
              size="large"
              >下载</el-button
            >
            <el-button type="primary" v-if="props.isPrint" size="large"
              >打印</el-button
            >
            <el-button type="primary" v-if="props.isShare" size="large"
              >分享</el-button
            >
          </div>
        </div>
      </template>
      <div ref="refIframe" id="wordView" v-html="wordText" />
      <input type="file" @change="preview" ref="file">
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { onMounted, nextTick, ref, watch } from 'vue';
import mammoth from "mammoth";
import * as docx from 'docx-preview'
import * as JSZip from 'jszip'
const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '预览',
  },
  action: {
    type: String,
    default: '',
  },
  isDownload: {
    type: Boolean,
    default: true,
  },
  isPrint: {
    type: Boolean,
    default: true,
  },
  isShare: {
    type: Boolean,
    default: true,
  },
  //pdfjs 按钮权限
});
const wordText = ref('');
const file = ref<any>(null)
const refIframe = ref<any>(null)
const emits = defineEmits(['update:isShow']);
const close = () => {
  emits('update:isShow', false);
};
onMounted(()=>{
  window.JSZip = JSZip
})
const preview = (e:any) => {
  docx.renderAsync(file.value?.files[0], refIframe.value)// 渲染到页面
}
watch(
  () => props.isShow,
  async (newValue, oldValue) => {
    if (newValue) {
      
      // const blob = new Blob([props.action]);
      // let reader = new FileReader();
      // reader.readAsArrayBuffer(blob);
      // console.log(reader);
      
      // reader.onload = function (loadEvent:any) {
      //   let arrayBuffer = loadEvent.target?.["result"];
      //   let options = {
      //       styleMap: [
      //         "ul => ol:fresh",
      //       ]
      //   };
      //   mammoth.convertToHtml({ arrayBuffer: new Uint8Array(arrayBuffer) },options).then((resultObject) => {
      //     // let html = resultObject.value;
      //     // html = html.replace(/<img/g,'<img class="word-img"');
      //     nextTick(() => {
      //       wordText.value = resultObject.value;
      //     });
      //   });
      // }
      // const xhr = new XMLHttpRequest();
      // console.log(props.action);
      
      // xhr.open("get", props.action, true);
      // xhr.responseType = "arraybuffer";
      // xhr.onload = () => {
      //   if (xhr.status == 200) {
      //     mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then((resultObject) => {
      //       nextTick(() => {
      //         wordText.value = resultObject.value;
      //       });
      //     });
      //   }
      // };
      // xhr.send();
    }
  },
);
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  height: 100%;
  .el-dialog__header {
    height: 60px;
    background-color: rgb(61, 158, 223);
    margin-right: 0;
    .my-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-dialog__title {
        font-size: 24px;
      }
    }
    .el-dialog__headerbtn {
      font-size: 30px;
      top: 22px;
    }
  }

  .el-dialog__body {
    height: calc(100% - 90px);
  }
}
</style>
